<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>02 - OL4加载天地图WMTS服务展示地图</title>
    <!-- <script src='../lib/ol4/ol4.js'></script> -->
    <script src='../lib/ol6.14.1/ol.js'></script>
    <script src='../lib/proj4/proj4.js'></script>
    <!--        <link rel="stylesheet" href="../css/ol4/ol.css">-->
    <link rel='stylesheet' href='../css/ol6.14.1/ol.css'>
    <link rel='stylesheet' href='../css/main.css'>
    <style>
        .change-btn {
            position: absolute;
            top: 20px;
            left: 100px;
        }

        .change-btn2 {
            position: absolute;
            top: 20px;
            left: 180px;
        }
    </style>
</head>
<body>
<div id='map'></div>
<button class='change-btn' onclick='onChangeStyle()'>update text</button>
<button class='change-btn2' onclick='onChangeStyle2()'>get text</button>
</body>
<script>
	const projection = ol.proj.get('EPSG:4326');
	const tileSize = 256;
	const projectionExtent = projection.getExtent();
	const origin = [-180.0, 90.0];
	const size = ol.extent.getWidth(projectionExtent) / tileSize;
	let resolutions = [];
	let matrixIds = [];
	for (let z = 0; z < 19; ++z) {
		resolutions[z] = size / Math.pow(2, z);
		matrixIds[z] = z;
	}

	const maxZoom = 19;
	const minZoom = 1;
	const zoom = 9;

	// resolutions = resolutions.slice(5, 15);
	// matrixIds = matrixIds.slice(5,15);

	// console.log(resolutions);

	const tileGrid = new ol.tilegrid.WMTS({
		origin,
		resolutions,//: resolutions.slice(5, 15),
		extent: projectionExtent,
		matrixIds,//: matrixIds.slice(5, 15)
	});

	const url = `http://t0.tianditu.gov.cn/vec_c/wmts?tk=a6bf5a2496115f58481b947040c83ae3`;

	const wmtsSource = new ol.source.WMTS({
		url,
		layer: 'vec',
		matrixSet: 'c',
		format: 'tiles',
		projection,
		tileGrid,
		style: 'default',
		wrapX: false,
	});
	// 图层
	const baseLayer = new ol.layer.Tile({
		source: wmtsSource,
	});

	const cva_url = `http://t0.tianditu.gov.cn/cva_c/wmts?tk=a6bf5a2496115f58481b947040c83ae3`;

	const cvaWmtsSource = new ol.source.WMTS({
		url: cva_url,
		layer: 'cva',
		matrixSet: 'c',
		format: 'tiles',
		projection,
		tileGrid,
		style: 'default',
		wrapX: false,
	});
	// 图层
	const cvaBaseLayer = new ol.layer.Tile({
		source: cvaWmtsSource,
	});
	// 120.0230269151, 30.2856519116
	const points = [
		[0, 0],
		[113.683527, 34.759673],
	];
	const centerPoint = points[1];


	const map = new ol.Map({
		layers: [
			baseLayer,
		],
		target: 'map',
		view: new ol.View({
			center: centerPoint,
			projection,
			zoom: 12,
		}),
	});

	function erase(geom) {
		const extent = [-180, -90, 180, 90];
		const polygonRing = ol.geom.Polygon.fromExtent(extent);
		const coords = geom.getCoordinates();
		coords.forEach(coord => {
			const linearRing = new ol.geom.LinearRing(coord?.[0]);
			polygonRing.appendLinearRing(linearRing);
		});
		return polygonRing;
	}

	function addconver(converLayer, data) {
		const fts = new ol.format.GeoJSON().readFeatures(data);
		const ft = fts?.[0];
		console.log('fts:', fts);
		const converGeom = this.erase(ft.getGeometry());
		const convertFt = new ol.Feature({
			geometry: converGeom,
		});
		convertFt.setStyle(
			new ol.style.Style({
				fill: new ol.style.Fill({
					color: 'rgb(0,0,0,0.7)',
				}),
				stroke: new ol.style.Stroke({
					color: '#1c8acf ',
					width: 3,
				}),
			}),
		);
		converLayer.getSource().addFeature(convertFt);
	}

	fetch('./gchz.json').then((response) => response.json()).then((geojson) => {
		// const features = new ol.format.GeoJSON().readFeatures(geojson);
		/*features.forEach((feature, index) => {
			// console.log(feature.get('name'));
			const styleFun = () => {
				return new ol.style.Style({
					stroke: new ol.style.Stroke({
						color: index % 2 === 0 ? 'rgb(255,0,255,1)' : 'rgb(255,255,0,1)',
						width: 2,
					}),
					fill: new ol.style.Fill({
						color: 'rgba(142,225,255,0.6)',
					}),
				});
			};
			feature.setStyle(styleFun);
		});*/
		// console.log(features);
		const vectorSource = new ol.source.Vector();

		const layer = new ol.layer.Vector({
			source: vectorSource,
		});
		map.addLayer(layer);
		addconver(layer, geojson);
	});

</script>
</html>
